<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" :title.sync="title" width="940px" @close="closeDialog">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="125px">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="模板名称" prop="templateName">
            <el-input v-model="form.templateName" :readonly="isView" class="input_text" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="巡检类型" prop="typeId">
            <el-select v-model="form.typeId" placeholder="巡检类型" :disabled="isView" class="input_text" @change="indexSelect($event)">
              <el-option v-for="(item,index) in inspectionType" :key="index" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="巡检对象" prop="objId">
            <el-select v-model="form.objId" placeholder="巡检对象" :disabled="isView" class="input_text" @change="objectSelect($event)">
              <el-option v-for="(itemobject,index) in inspectionObject" :key="index" :label="itemobject.label" :value="itemobject.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="巡检项目" prop="checkBoxDatas">
        <el-table
          ref="multiTable"
          v-loading="loading"
          :data="dataitem"
          :row-style="tableRowStyle"
          :header-cell-style="tableHeaderColor"
          :disabled="checkboxT"
          size="small"
          style="width: 100%;"
          height="200px"
          @selection-change="changeFun"
        >
          <el-table-column v-show="isView" type="selection" />
          <el-table-column prop="itemname" :show-overflow-tooltip="true" label="巡检项目" />
          <el-table-column prop="itemcontent" :show-overflow-tooltip="true" label="巡检内容" />
          <el-table-column prop="itemstandard" :show-overflow-tooltip="true" label="合格标准" />
          <el-table-column prop="remark" :show-overflow-tooltip="true" label="备注" />
        </el-table>
      </el-form-item> -->
      <el-form-item label="对象" required>
        <el-tree
          ref="tree"
          :data="projectsTree"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          :default-expanded-keys="defaultCheckBoxDatas"
          :default-checked-keys="defaultCheckBoxDatas"
        />
      </el-form-item>
      <el-form-item label="模板说明">
        <el-input v-model="form.templateDesc" style="width: 760px;" type="textarea" :rows="5" :readonly="isView" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-show="isView===false || isAdd===true" type="text" @click="cancel">取消</el-button>
      <el-button v-show="isAdd===false && isView===true" :loading="loading" type="primary" @click="cancel">返回</el-button>
      <el-button v-show="isView===false" :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import request from '@/utils/request'
import { add, edit } from '@/api/inspectionTemplate'
// import { dictByName } from '@/api/dict'
// import { byDictId } from '@/api/dictDetail'
// import { query } from '@/api/inspectionItem'
export default {
  props: {
    isAdd: { type: Boolean, required: true },
    isView: { type: Boolean, required: true },
    supThis: { type: Object, required: true }
  },
  dataitem() {
    return {
      delLoading: false,
      supThis: this
    }
  },
  inject: ['getProjects'],
  data() {
    // const checkTemplateItem = (rule, value, callback) => {
    //   if (this.form.checkBoxDatas.length < 1) {
    //     callback(new Error('请选择巡检对象'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      loading: false,
      dialog: false,
      title: '',
      inited: false,
      form: {
        // typeName: '',
        checkBoxDatas: [],
        // objName: '',
        templateName: '',
        templateDesc: ''
      },
      defaultCheckBoxDatas: [],
      // dataitem: [],
      // dictId: 0,
      // itemIds: [],
      // inspectionObject: [],
      // inspectionType: [
      //   { value: 1, name: '设备类巡检' },
      //   { value: 2, name: '设施类巡检' },
      //   { value: 3, name: '管理类巡检' }
      // ],
      rules: {
        templateName: [{ required: true, trigger: 'blur', message: '模板名称不能为空' }]
        // checkBoxDatas: [{ required: true, trigger: 'blur', message: '巡检对象不能为空', validator: checkTemplateItem }]
        // typeId: [{ required: true, trigger: 'blur', message: '巡检类型不能为空' }],
        // objId: [{ required: true, trigger: 'blur', message: '巡检对象不能为空' }],
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: {
    projectsTree() {
      return this.getProjects()
    }
  },
  mounted: function() {
    this.title = this.isAdd ? '新增' : (this.isView === true ? '详情' : '编辑')
  },
  updated: function() {
    // this.$nextTick(function() {
    //   if (this.dataitem.length > 0 && this.itemIds.length > 0 && this.dialog && !this.inited) {
    //     this.dataitem.forEach(element => {
    //       let flag = false
    //       for (var index in this.itemIds) {
    //         if (element.id === this.itemIds[index]) {
    //           flag = true
    //           break
    //         }
    //       }
    //       if (flag) {
    //         this.$refs['multiTable'].toggleRowSelection(element, true)
    //       }
    //       this.inited = true
    //     })
    //   }
    // })
  },
  methods: {

    checkboxT(row) {
      if (this.isView) {
        return false// 禁用
      } else {
        return true// 不禁用
      }
    },

    // checkPermission,
    // byNameinfo(name) {
    //   dictByName(name).then(res => {
    //     if (res.id) {
    //       byDictId(res.id).then(resobject => {
    //         this.inspectionObject = resobject
    //       })
    //     }
    //   })
    // },
    indexSelect(event) {
      // if (event === 1) {
      //   this.byNameinfo('设备类巡检')
      // } else if (event === 2) {
      //   this.byNameinfo('设施类巡检')
      // } else if (event === 3) {
      //   this.byNameinfo('管理类巡检')
      // }
      // 设备类巡检对象
    },
    // objectSelect(event) {
    //   this.byObjectId(event).then(res => {
    //     this.dataitem = res
    //   })
    // },
    // queryItems(params) {
    //   this.dataitem = []
    //   query(params).then(res => {
    //     this.dataitem = res.content
    //   })
    // },
    // // 获取id值
    // byObjectId(id) {
    //   return request({
    //     url: 'api/inspectionItem/byObjectId/' + id,
    //     method: 'get'
    //   })
    // },
    changeFun(val) {
      this.form.checkBoxDatas = val
    },
    closeDialog() {
      this.inited = false
      this.cancel()
    },
    cancel() {
      this.resetForm()
    },
    doSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 获取被选中的项目id列表
          const checkProjects = this.$refs.tree.getCheckedKeys(true)
          if (!checkProjects.length) {
            this.$message.warning('巡检对象不能为空')
            return;
          }
          this.form.checkBoxDatas = checkProjects.map(item => ({ id: item }));
          this.loading = true
          if (this.isAdd) {
            this.doAdd()
          } else this.doEdit()
        }
      })
    },
    doAdd() {
      add(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    doEdit() {
      edit(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.supThis.init()
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    resetForm() {
      this.dialog = false
      this.inited = false
      this.$refs['form'].resetFields()
      this.form = {
        id: '',
        // typeId: '',
        // typeName: '',
        // objId: '',
        // objName: '',
        templateName: '',
        templateDesc: '',
        checkBoxDatas: []
      }
      // this.dataitem = []
      this.defaultCheckBoxDatas = []
    },
    // 修改table tr行的背景色
    tableRowStyle({ row, rowIndex }) {
      return 'background-color: pink'
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: lightblue;color: #fff;font-weight: 500; height:40px;'
      }
    }
  }
}
</script>

<style scoped>
.input_text {
  width: 300px;
}
</style>
